<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>分页效果模拟</title>
    <style>
        ul li {
            list-style: none;
            float: left;
            box-sizing: border-box;
            width: 24%;
            text-align: center;
            font-size: 1.1em;
            border: 1px solid #666;
            margin-left: -1px;
            margin-top: -1px;
            height: 34px;
            line-height: 34px;
        }
        .page{
            clear: both;
            width: 100%;
            text-align: center;
            padding-top: 30px;
        }
        #barcon{
            position: fixed;
            width: 800px;
            bottom: 70px;
            left: 50%;
            margin-left: -400px;
        }
        #barcon a{
            display: inline-block;
            width: 70px;
            background-color: rgb(76, 195, 241);
            margin-left: 10px;
            border-radius: 10px;
            color: #fff;
            text-decoration: none;
            font-size: 0.9em;
            height: 22px;
            line-height: 22px;
        }
    </style>
    <script>
    function goPages(pno, psize) {
        var totalUl = document.getElementById('totalUl');
        var liNum = document.getElementsByTagName('li');//所用li，方便确定行数，这里是4个一行
        var totalPage = 0;//总页数
        var pageSize = psize;//每页显示行数
        // 总共分几页(parseInt)用于取整
        if (liNum.length / pageSize > parseInt(liNum.length / pageSize)) {
            totalPage = parseInt(liNum.length / pageSize) + 1;
        } else {
            totalPage = parseInt(liNum.length / pageSize)
        }
        var currentPage = pno;//当前页数
        // 开始显示的行
        var startRow = (currentPage - 1) * pageSize + 1;
        var endRow = currentPage * pageSize;
        endRow = (endRow > liNum) ? liNum : endRow;
        // 遍历显示数据实现分页
        for (let i = 1; i < (liNum.length + 1); i++) {
            var isrow = liNum[i - 1];
            if (i >= startRow && i <= endRow) {
                isrow.style.display = "block";
            } else {
                isrow.style.display = "none";
            }
        }
        // 页数切换
        var tempStr = "共" + (liNum.length / 4) + "条记录" + " 分" + totalPage + "页 " + " 当前第" + currentPage + "页";
        if (currentPage > 1) {
            tempStr += "<a href=\"#\" onClick=\"goPages(" + (1) + "," + psize + ")\">首页</a>";
            tempStr += "<a href=\"#\" onClick=\"goPages(" + (currentPage - 1) + "," + psize + ")\">上一页</a>"
        } 
        // else {
        //     tempStr += "首页";
        //     tempStr += "<上一页";
        // }
        if (currentPage < totalPage) {
            tempStr += "<a href=\"#\" onClick=\"goPages(" + (currentPage + 1) + "," + psize + ")\">下一页</a>";
            tempStr += "<a href=\"#\" onClick=\"goPage(" + (totalPage) + "," + psize + ")\">尾页</a>";
        } 
        // else {
        //     tempStr += "下一页>";
        //     tempStr += "尾页";
        // }
        document.getElementById("barcon").innerHTML = tempStr;
    }
    window.onload = function () {
        goPages(1, 44)
    }
</script>
</head>

<body>
    <ul>
        <li>No</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
    </ul>
    <ul class="headerul" id="totalUl">
        <li>1</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>2</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>3</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>4</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>5</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>6</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>7</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>8</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>9</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>10</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>11</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>12</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>13</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>14</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>15</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>16</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>17</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>18</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>18</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>18</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>19</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>20</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>21</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>22</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
        <li>23</li>
        <li>Work Order</li>
        <li>Pallet/Lot</li>
        <li>Time</li>
    </ul>
    <div class="page">
        <div id="barcon"></div>
    </div>
</body>

</html>